import * as React from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  StatusBar,
  Modal,
  Alert,
 } from 'react-native';
import { Input } from 'native-base';
import { Button, Dialog, Portal, PaperProvider, Text as TextP } from 'react-native-paper';
import FormItem from '../components/Form/FormItem';
import { useForm } from 'react-hook-form';
import { fetch_get, fetch_post } from '../http/http';
import { userLogin } from "../store/index";
import { useDispatch } from 'react-redux';
import { BasicModal } from '../components/Modal/BasicModal';

function LoginForm({route, navigation}){
  const { control, handleSubmit, formState: {errors}} = useForm({
    defaultValues: {
      username: '',
    }
  })
  const dispatch = useDispatch();
  const [isShow,setIsShow] = React.useState(false)
  const [modalVisible, setModalVisible] = React.useState(false);

  
  async function onSubmit(data){
    setIsShow(!isShow);
    const {username,password} = data;
    const res = await fetch_get('https://dataiqs.com/api/kgmusic/',{msg: "晴天",type: 'song'});
    // console.log('测试response',res)
    // http get response info(应该做处理，分析是不是成功，成功的话此处直接获取success + data，失败此处获取fail + 失败原因)
    // set stroage and get user info navigate
    if(res.ok==200){
      let fakelogin = {
        username: username,
        userid: username,
        token: 'faketoken',
      }

      dispatch(userLogin(fakelogin));
      navigation.navigate("hometab");
    }else{
      console.log('返回不ok',Object.keys(res))
    }
  }

  const [visible, setVisible] = React.useState(false);

  return (
    <View style={{flex:1,alignItems: 'center',justifyContent: 'center', backgroundColor: 'lightblue'}}>
      <View style={styles.loginForm}>
        <View style={styles.loginTitle}>
          <Text style={styles.titleText}>登陆</Text>
        </View>
        <View style={styles.loginBody}>
          <FormItem
            style={{marginBottom:10}}
            label='账户'
            name='username'
            control={control}
            rules={{required: "请输入登陆账户"}}
            errors={errors.username}
            render={({field:{onChange,value}}) =>{
              return (
                <Input
                  size='lg'
                  value={value}
                  onChangeText={onChange}
                  placeholder="请输入登陆账户"
                />
              )
            }} 
          />


          <FormItem
            style={{marginBottom:10}}
            label='密码'
            name='password'
            control={control}
            rules={{required: "请输入密码"}}
            errors={errors.password}
            render={({field:{onChange,value}}) =>{
              return (
                <Input
                  size='lg'
                  value={value}
                  onChangeText={onChange}
                  placeholder="请输入密码"
                />
              )
            }} 
          />
        </View>
        <Pressable style={styles.loginBtn} onPress={handleSubmit(onSubmit)}>
            <Text style={styles.btnText}>登陆</Text>
        </Pressable>

          <Button onPress={()=> setVisible(true)}>Show Dialog</Button>
          <View>
            <BasicModal
              isVisible={visible}
              onClose={() => setVisible(false)}
              title="提示信息"
              content="这是一段需要展示的信息内容。"
              footerItems={[
                { text: '确定', onPress: () => console.log('点击确定') },
                { text: '取消', onPress: () => console.log('点击取消') },
              ]}
              style={{alignItems: 'center', justifyContent: 'center'}}
            />
          </View>
      </View>
    </View>
  )
 }


const styles = StyleSheet.create({
  loginForm:{
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.9)',
    borderWidth: 1,
    borderRadius: 20,
    borderColor: 'rgba(236,236,236,0.9)',
    height: 400,
    width: 400,
    padding: 15,
  },
  loginTitle:{
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    height: 60,
    margin: 10,
  },
  titleText: {
    color: 'black',
    fontSize: 50,
    textAlign: 'center',
  },
  loginBody:{
    // alignItems: 'center',
    // justifyContent: 'center',
    // textAlign: 'center',
    width: 280,
  },
  loginInput:{
    // alignItems: 'center',
    // justifyContent: 'center',
    // textAlign: 'left',
  },
  loginBtn: {
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    width: 80,
    height: 40,
    borderWidth:1,
    borderRadius: 10,
    borderColor: 'rgba(219, 220, 220, 1)',
    margin: 15,
  },
  btnText:{
    textAlign: 'center',
    fontSize: 18,
    fontWeight: 'bold',
  },
  modal:{
    width: 300,
    height: 200,
    backgroundColor: "pink",
  }
})
 export default LoginForm;